<!--
 * @Author: 邱雪
 * @Date: 2022-01-10 10:10:43
 * @LastEditTime: 2022-11-02 10:32:03
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \code\ctp-static-portal-front\src\components\login\index.vue
-->
<template>
  <div class="login-wrapper" id="loginPreBtnIframeDiv">
    <div :style="loginPreBtnStyle" class="login-btn" @click="handleClick">
      <span class="tips">{{ title }}</span>
    </div>
  
      <div v-show="flag" class="popup">
      <Login-detail-ifra :isPop="'true'" />
      <!--<LoginDetail :isPopup="true" @close="handleClose"></LoginDetail>-->
    </div>
    
  </div>
</template>

<script>
  // import "../../../static/modelOneData/vPortalData";
  import LoginDetailIfra from './login-detail-ifra.vue';
  import emitter from '../../utils/emitter';

  export default {
    name: 'Login',
    components: {
      LoginDetailIfra
    },
    props: {
      loginPreBtnTheme: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        flag: false,
        title: $.i18n('cap.btn.login.label'),
        windowWidth: window.innerWidth, // 初始化窗口宽度
        windowHeight: window.innerHeight, // 初始化窗口高度
      };
    },
    computed: {
      loginPreBtnStyle() {
        return {
          backgroundColor: this.loginPreBtnTheme.loginBtnBgc,
          color: this.loginPreBtnTheme.loginBtnColor
        };
      }
    },
    mounted() {
      emitter.subscribe('close', () => {
        this.flag = false;
      });
      emitter.subscribe('openFrame', () => {
        this.flag = true;
      });
      document.getElementsByClassName('popup')[0].style.width = window.innerWidth + 'px';
        document.getElementsByClassName('popup')[0].style.height = window.innerHeight + 'px';
       // 注册resize事件监听器
    window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
    // 移除resize事件监听器
    window.removeEventListener('resize', this.handleResize);
  },
    methods: {
        handleClick() {
          this.flag = true;
        },
        handleResize() {
          console.log('屏幕缩放 :>> ');
        // 更新数据
        this.windowWidth = window.innerWidth;
        this.windowHeight = window.innerHeight;
        document.getElementsByClassName('popup')[0].style.width = window.innerWidth + 'px';
        document.getElementsByClassName('popup')[0].style.height = window.innerHeight + 'px';
      },
    }
  };
</script>
<style scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .loginPreBtnIframePage .login-wrapper {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .login-btn {
    float: right;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
  }

  .loginPreBtnIframePage .popup {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  
  }

  .popup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top:0px;
    left: 0;
    z-index: 15;
 
    background: rgba(0,0,0,0.5);
  }

  .tips {
    display: inline-block;
    height: 100%;
    padding-top: 2px;
  }
</style>
